<template>
	<view>
		<view class="search u-p-22">
			<u-search placeholder="搜日记、搜话题、搜人" v-model="keyword" @search="search" @custom="search" focus></u-search>
		</view>
		<view style="padding-top: 110rpx">
			<view style="position: relative">
				<view>
					<u-tabs :list="list" :is-scroll="false" inactive-color="#101010" active-color="#245484"
						:current="type" @change="change1"></u-tabs>
				</view>
				<view style="height: 2rpx; width: 100%;background: #E3E3E3;left: 0;
        bottom: 4rpx;position: absolute;z-index: 1"></view>
			</view>
			<view v-if="showResult">
				<view class="tagRecommend" style="width: 240rpx;padding-top: 10rpx;" v-if="type==0">
					<u-tabs active-color="#101010" inactive-color="#a8a8a8" :show-bar="false" font-size="32"
						:list="recommendList" :is-scroll="false" :current="current" @change="change2"></u-tabs>
				</view>
				<view>
					<view v-for="(item, index) in diary" :class="{'u-p-t-20': type==0}" :key="index">
						<Diary :info-data="item" v-if="type==0" @like-change="res => likeChange(index, res)"
							:user-info="item.compassNormalUser" :showMore="true" />
						<view v-if="type==1" class="u-p-l-50 u-p-r-50 u-border-bottom" @click="toList(item)">
							<view class="u-p-t-24 u-p-b-24 u-border-bottom u-flex u-font-32">
								<view class="flex-1 u-flex">
									<view class="huati u-m-r-22">#</view>
									<view>{{ item.diary_type }}</view>
								</view>
								<view class="_num">日记 {{ item.diaryNum }}</view>
							</view>
						</view>
						<navigator v-if="type==2" :url="`/pages/forum/personal?id=${item.userId}`"
							class="u-p-t-24 u-p-b-24 u-p-l-50 u-p-r-50 u-border-bottom u-flex">
							<img :src="item.avatar" alt="" class="avatar">
							<view class="u-flex-col">
								<view class="nickname">{{ item.nickName }}</view>
							</view>
						</navigator>
					</view>
				</view>
				<loadMore :status="status" />
			</view>
		</view>
	</view>
</template>

<script>
	import {
		request
	} from '../../util/api'
	import Diary from '../../pages/forum/components/Diary.vue'
	import loadMore from '../../components/loadMore'
	import {
		TOAST
	} from '../../util/util'
	import {
		getCurrentFullPath
	} from "../../util/util";
	export default {
		components: {
			Diary,
			loadMore
		},

		data() {
			return {
				keyword: '',
				list: [{
					name: '日记'
				}, {
					name: '话题'
				}, {
					name: '人'
				}],
				recommendList: [{
					name: "最新"
				}, {
					name: "推荐"
				}],
				type: 0,
				current: 0,
				showResult: false,
				diary: [],
				status: 'loading',
				pageNum: 1
			}
		},

		onReachBottom() {
			if (!this.status) {
				this.status = 'loading'
				this.searchAction()
			}
		},

		methods: {
			// 转发功能
			onShareAppMessage(res) {
				return {
					path: getCurrentFullPath()
				}
			},
			toList(item) {
				this.$u.route({
					url: '/package/forum/diaryList?type=' + item.diary_type + '&title=日记'
				})
			},

			change1(res) {
				this.type = res
				this.pageNum = 1
				this.diary = []
				this.searchAction()
			},

			change2(res) {
				this.current = res
				this.pageNum = 1
				this.diary = []
				this.searchAction()
			},

			search() {
				if (!this.keyword) {
					TOAST('请输入关键字！')
					return
				}
				this.showResult = true
				this.pageNum = 1
				this.diary = []
				this.searchAction()
			},

			searchAction() {
				if (!this.keyword) {
					return
				}
				request({
					url: `/system/CompassDiary/search/${this.type + 1}/${this.keyword}/${this.current + 1}`,
					not_loading: true,
					data: {
						pageNum: this.pageNum,
						pageSize: 10
					}
				}).then(res => {
					this.diary = this.diary.concat(res.rows)
					this.pageNum++
					if (this.diary.length >= res.total) {
						this.status = 'finished'
					} else {
						this.status = ''
					}
				})
			},

			likeChange(index, data) {
				const {
					likeFlag,
					likeNum
				} = data
				this.$set(this.diary[index], 'likeFlag', likeFlag)
				this.$set(this.diary[index], 'likeNum', likeNum)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.search {
		position: fixed;
		top: 0;
		width: 100%;
		left: 0;
		background: #fff;

		z-index: 100;
	}

	.avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 100%;
		margin-right: 28rpx;
	}

	.nickname {
		color: rgba(4, 4, 4, 100);
		font-weight: bold;
		font-size: 28rpx;
	}

	.huati {
		width: 56rpx;
		height: 56rpx;
		line-height: 56rpx;
		background-color: rgba(37, 85, 132, 100);
		text-align: center;
		color: #fff;
		border-radius: 100%;
	}

	._num {
		color: #000;
		font-size: 28rpx;
	}
</style>
